import * as React from 'react';
import PageLayout from '../../page-layout';
import DocumentTitle from 'react-document-title';
import './style/index.less';
import { Button, message, Select } from 'antd';

const { Option } = Select;

export interface HomeProps {}

interface PageMeta {
  title: string;
}

const listStr = `'windows 2008'.match(/windows (?=\\d{1,4})/)
'windows 2008'.match(/windows (?=\\d{1,4}?)/)
'windows 2008'.match(/windows (?:\\d{1,4})/)
'windows 2008'.match(/windows \\B(\\d{1,4})/)
'windows 2008'.match(/windows (\\d{1,4})/g)
'windows 2008'.match(/windows (\\d{1,4}?)/)
'windows 2008'.match(/windows$|(?:\\d{1,4})/)`;

const dataSource = listStr.split(/[\r\n]/).map((item, index) => ({
  title: `用例 ${index}`,
  key: index,
  value: item,
}));

class Home extends React.Component<HomeProps, any> {
  static propTypes = {};
  static defaultProps = {};
  private readonly meta: PageMeta;
  state = {
    code: '',
    result: undefined,
  };

  constructor(props) {
    super(props);
    this.meta = this.getPageMeta();
  }

  getPageMeta() {
    return {
      title: '微风测试中心-JS测试页',
    };
  }

  private handleCodeChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    this.setState({ code: e.currentTarget.value });
  };
  private handleRunClick = () => {
    const { code } = this.state;
    try {
      const result = eval(code);
      if (typeof result === 'string' && /^\s+$/.test(result)) {
        message.info('执行结果为空白字符串, 长度为' + result.length);
        return;
      }
      if (typeof result === 'undefined') {
        // message.info('执行结果为 undefined');
        this.setState({ result: 'undefined' });
        return;
      }
      this.setState({ result: JSON.stringify(result, null, '\t') });
      console.log(result);
    } catch (e) {
      message.error(e.message);
    }
  };
  private handleClearClick = () => {
    this.setState({ code: '', result: '' });
  };

  render() {
    const { title } = this.meta;
    const { code, result } = this.state;
    return (
      <PageLayout>
        <DocumentTitle title={title} />
        <div className="v-page-runner">
          <div>
            <div className="runner-box-btn-running">
              <Select defaultValue={''} onChange={(code) => this.setState({ code })} style={{ width: 120, marginRight: 10 }}>
                <Option value={''}>--请选择--</Option>
                {dataSource.map((i) => (
                  <Option key={i.key} value={i.value}>
                    {i.title}
                  </Option>
                ))}
              </Select>
              <Button type="primary" onClick={this.handleRunClick} style={{ width: 90 }}>
                RUN
              </Button>
              <Button onClick={this.handleClearClick} style={{ width: 90, marginLeft: 10 }}>
                CLEAR
              </Button>
            </div>
            <div className="runner-box">
              <div className="runner-box-left">
                <textarea
                  className="runner-box-input"
                  placeholder="Please Enter your JS Expression"
                  value={code}
                  onChange={this.handleCodeChange}
                />
              </div>
              <div className="runner-box-right">
                <div placeholder="Here is the result" className="runner-box-result">
                  {result}
                </div>
              </div>
            </div>
          </div>
        </div>
      </PageLayout>
    );
  }
}

export default Home;
